<template>
  <div class="groupdetail">
    <div class="row bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span></span>
      </div>
      <el-button-group class="col" id="toright">
        <el-button type="primary" @click="handleBack">返回题库组</el-button>
      </el-button-group>
    </div>
    <template>
      <el-table :data="groupdetail" border style="width: 100%">
        <el-table-column prop="ID" label="序号" width="180"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="type" label="类型" width="180"></el-table-column>
        <el-table-column prop="knowledgepoints" label="知识点" width="180"></el-table-column>
        <el-table-column prop="tags" label="标签" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="middle" type="primary" @click="handleLook(scope.$index, scope.row)">查看</el-button>
            <el-button size="middle" type="primary" @click="handleCopy(scope.$index, scope.row)">拷贝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 抽屉 -->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <div class="drawerright">
        <div class="title">
          <h6 style="font-weight:bold;color:#666">查看题</h6>
          <i class="el-icon-close" @click="close"></i>
        </div>
        <div class="inner">
          <p>名称：{{show.name}}</p>
          <p>类型：{{show.type}}</p>内容：
          <span
            style="display:inline-block;margin-bottom:13px;border:1px solid #666;padding:10px;box-sizing: border-box;"
            v-html="show.text"
          ></span>
          <p v-if="show.data">答案：{{show.data.answer}}</p>
          <p>知识点：{{show.knowledgepoints}}</p>
          <p>标签：{{show.tags}}</p>
        </div>
      </div>
    </el-drawer>
    <!-- 弹窗 -->
    <el-dialog title="拷贝到本地" :visible.sync="centerDialogVisible" width="30%" left>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="选择题库组">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option
              v-for="item in questiongroup"
              :key="item.ID"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "groupdetail",
  data() {
    return {
      ID: "",
      groupdetail: [],
      show: {},
      centerDialogVisible: false,
      drawer: false,
      form: {
        name: "",
        region: ""
      },
      questiongroup: []
    };
  },
  methods: {
    handleBack() {
      // console.log(this.$route.params.ID)
      this.ID = this.$route.params.ID;
      this.$router.push({
        path: "/school/watchschool/index/" + this.ID,
        query: { activeName: "fourth" }
      });
    },
    handleLook(index, row) {
      console.log(index, row);
      this.show = row;
      this.drawer = true;
    },
    handleCopy(index, row) {
      console.log(index, row);
      this.show = row;
      this.centerDialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    close() {
      this.drawer = false;
    },
    log(v) {
      console.log(v);
    },
    onSubmit() {
      console.log("submit!");
    },
    add() {
      console.log(this.form.region);
      console.log(
        this.questiongroup.filter(item => item.name == this.form.region)
      );
      console.log(
        this.questiongroup.filter(item => item.name == this.form.region)[0].ID
      );
      // alert(1);
      this.$axios({
        method: "post",
        url: "/v4/backAdmin/createitembank",
        data: {
          name: this.show.name,
          itembankgroupid: this.questiongroup.filter(
            item => item.name == this.form.region
          )[0].ID,
          data: this.show.data,
          type: this.show.type,
          tags: this.show.tags,
          text: this.show.text,
          username: this.show.username,
          knowledgepoints: this.show.knowledgepoints,
          analysis: this.show.analysis
        }
      })
        .then(data => {
          console.log(data);
        })
        .catch(err => {
          console.log(err);
        });
      this.centerDialogVisible = false;
      // console.log(arr)
    }
  },
  created() {
    if (this.$route.query.detail) {
      this.groupdetail = this.$route.query.detail;
    }
    this.$axios({
      method: "post",
      url: "/v4/teacher/getitembankgroup",
      xsrfCookieName: "csrfToken", // default
      xsrfHeaderName: "x-csrf-token" // 默认的
    })
      .then(data => {
        console.log(data.data.data);
        this.questiongroup = data.data.data;
      })
      .catch(err => {
        console.log(err);
      });
    if (this.form.region) {
      console.log(this.form.region);
    }
  }
};
</script>

<style scoped>
.el-button-group > .el-button:first-child:last-child {
  float: right;
}
.el-table--border {
  margin-top: 15px;
}
.drawerright {
  /* style="margin:0 15px;margin-top:40px;" */
  margin: 40px 15px 0 15px;
}
.title {
  padding: 0 30px 0 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eaeaea;
}
.inner {
  margin-top: 20px;
}
.el-drawer.rtl {
  overflow: auto;
}
</style>